$(() => {
    $("#header").load("./template/header.html");
    // 获取元素
    var $allSelect = $("#allSelect");
    var $tbody = $("tbody");
    var $allCount = $("#allCount");
    var $btn=$(".btn")
    // 定义一个变量 
    var arr = [];
    // 发送请求获取购物车数据
    $.ajax({
        url: "/lession05/getShoppingCart",
        type: "get",
        dataType: "json",
        success(data) {
            // 判断数据是否正确
            if (!data.error) {
                // 接收返回的数组
                arr = data.data
                // 渲染到页面上
                var html = data.data.map(val => {
                    return `
                     <tr>
                     <th scope="row"><input type="checkbox"></th>
                     <td>${val.goods_name}</td>
                     <td><img style="max-width:50%; max-height:50px;" src="${val.goods_small_logo}" alt=""></td>
                     <td>¥${val.goods_price}</td>
                     <td>${val.num}</td>
                     <td>
                         <div class="dropdown">
                             <a class="btn btn-secondary dropdown-toggle" href="javascript:void(0)" role="button"
                                 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                 操作按钮
                             </a>

                             <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                 <li><a class="dropdown-item increase" href="javascript:void(0)">增加</a></li>
                                 <li><a class="dropdown-item decrease" href="javascript:void(0)">减少</a></li>
                                 <li><a class="dropdown-item del" href="javascript:void(0)">删除</a></li>
                             </ul>
                         </div>
                     </td>
                 </tr>
                     `
                }).join("")
                $tbody.html(html)
            }
        }
    })



    // 个人习惯：将所有的事件都在最外面绑定
    $allSelect.click(function () {
        // 因为全选有两种可能性 1 全选 2 取消全选(全不选)
        // 获取当前select的状态
        // console.log(this.checked)
        var isChecked = $(this).prop("checked"); // 当鼠标点击checkbox并改变它的选中状态的时候 是不会影响页面中的标签上的checked属性的 所以使用getAttribute是不可以的 如果是jQuery也不要使用 attr方法 应该使用 原生.checked 或者jQuery.prop("checked")
        // console.log(isChecked)

        // 如果为真 都设置为真 如果为假 都设置为假
        $tbody.find("input").prop("checked", isChecked)

        // 我们将arr数组中每一个对象添加一个属性 isChoosed 
        arr.forEach(val => val.isChoosed = isChecked);

        // 计算价格
        // console.log(arr)
        // 计算规则：因为全选比较特殊，要么全都计算价格 要么全都不计算价格
        // 但是除了全选以外还有很多地方需要计算价格 我们希望这一段计算价格的代码可以重复使用
        // 所以我们就将规则修改为 挨个查看商品是否被选中 如果被选中 就计算没被选中就不计算

        // 将所有的isChoosed属性为真的过滤出来
        compute();

    })

    // 封装的计算价格的函数
    function compute() {
        // 过滤出所有的isChoosed属性为真的 因为这些代表了被选中
        var computedArr = arr.filter(val => val.isChoosed);
        // 使用归并方法计算总价
        var price = computedArr.reduce((prev, value) => prev + value.goods_price * value.num, 0)
        console.log(price)
        // 设置到页面中
        $allCount.html(price);
        return price
    }


    $btn.click(function() {
       
    //    发送请求将当前商品信息id提交给服务器
    localStorage.setItem("p",$allCount.text())

    })


    // 单个商品的选中和取消
    // 因为商品的数据是请求回来的，并且这些元素是请求回来之后通过js渲染到页面上的。所以不能直接获取元素 要使用委托模式
    $tbody.on("click", "input", function () {
        // 当我们点击input 的时候 我们要直到是点击的第几个input 
        // 方式：先获取所有的tbody中的input (这里面必然包含自己) 再判断this是第几个即可
        var idx = Array.from($tbody.find("input")).indexOf(this)
        // 将对应数据的isChoosed属性 设置为当前input的状态即可
        arr[idx].isChoosed = $(this).prop("checked")
        console.log(arr)
        // 计算价格
        compute();
    })


    // 增加
    $tbody.on("click", ".increase", function () {
        console.log("增加")
        // 获取当前是第几个增加按钮
        var idx = Array.from($tbody.find(".increase")).indexOf(this)

        // 发送请求 通知服务器 
        $.ajax({
            "url": "/lession05/addToCart",
            "data": {
                id: arr[idx].goods_id
            },
            type: 'get',
            dataType: "json",
            success: (data) => {
                if (!data.error) {
                    // 让对应的数组里的数据增加
                    arr[idx].num++;
                    // 改变页面中的内容
                    $(this).parents("td").prev().html(arr[idx].num)
                    pxmu.success(data.message)
                    compute();
                } else {
                    pxmu.fail(data.message)
                }
            }
        })
    })


    // 减少
    $tbody.on("click", ".decrease", function () {
        console.log("减少")
        // 获取当前的数据条数
        var idx = Array.from($tbody.find(".decrease")).indexOf(this)

        // 发送请求 通知服务器 
        $.ajax({
            "url": "/lession05/decreaseShoppingCart",
            "data": {
                id: arr[idx].goods_id
            },
            type: 'get',
            dataType: "json",
            success: (data) => {
                if (!data.error) {
                    // 让对应的数组里的数据增加
                    arr[idx].num--;
                    if (arr[idx].num < 0) {
                        arr[idx].num = 0;
                        return;
                    }
                    // 改变页面中的内容
                    $(this).parents("td").prev().html(arr[idx].num)
                    pxmu.success(data.message)
                    compute();
                } else {
                    pxmu.fail(data.message)
                }
            }
        })

        console.log(arr)
    })


    // 删除
    $tbody.on("click", ".del", function () {
        console.log("删除")
        // 找到商品在数组中的序号
        var idx = Array.from($tbody.find(".del")).indexOf(this)
        // 发送请求 通知服务器
        $.ajax({
            url: "/lession05/deleteCart",
            data: {
                id: arr[idx].goods_id
            },
            type: "get",
            dataType: "json",
            success: (data) => {
                console.log(data);
                if (!data.error) {
                    // 当成功的时候 从数组中删除
                    arr.splice(idx, 1);
                    // 从页面中删除
                    $(this).parents("tr").remove()
                    // 提示用户
                    pxmu.success(data.message)
                    // 计算价格
                    compute();
                } else {
                    pxmu.fail(data.message);
                }
            }
        })
    })



})